<template>
  <div>
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical"
      router
      :collapse-transition="false"
      background-color="#fff"
      text-color="#606266"
    >
      <div v-for="item in userMenuList" :key="item.id">
        <div v-if="item.path">
          <div v-if="!item.pid">
            <el-menu-item :index="item.path">
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </el-menu-item>
          </div>
        </div>
        <div v-else>
          <el-sub-menu :index="item.id + ''">
            <template #title>
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <div v-for="subItem in item.children" :key="subItem.id">
              <el-menu-item :index="subItem.path">
                <i :class="subItem.icon"></i>
                <span>{{ subItem.name }}</span>
              </el-menu-item>
            </div>
          </el-sub-menu>
        </div>
      </div>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import '../assets/iconfont.css'
import { setRoutes } from "@/router"
import Request from '../utils/request.js'

// 定义组件名称
defineOptions({
  name: 'Aside'
})

// 响应式数据
const userMenuList = ref([])
const userInfo = ref({})
const route = useRoute()

// 打印菜单
const printMenu = (menu) => {
  console.log("Submenu:" + menu)
}

// 刷新菜单
const refreshMenu = () => {
  Request.get("/menu/getMenuTree/" + userInfo.value.id).then(response => {
    if (response.code === '0') {
      localStorage.setItem("userMenuList", JSON.stringify(response.data))
      setRoutes()
    } else {
      // 注意：这里需要使用Element Plus的消息提示组件
      console.error(response.msg)
    }
  })
}

// 生命周期钩子
onMounted(() => {
  let userMenuListStr = localStorage.getItem("userMenuList")
  userMenuList.value = userMenuListStr ? JSON.parse(userMenuListStr) : []
  userInfo.value = localStorage.getItem("backUser") ? JSON.parse(localStorage.getItem("backUser")) : {}
  console.log("userMenuList:" + userMenuListStr)
})
</script>

<style scoped>
.el-menu {
  border-right: none;
  padding: 12px;
}

.el-menu-item {
  height: 50px;
  line-height: 50px;
  border-radius: 8px;
  margin-bottom: 4px;
  color: #606266;
  font-size: 14px;

  &:hover {
    color: #3AB777;
    background-color: #F0F9F4 !important;
  }

  &.is-active {
    color: #3AB777;
    background-color: #F0F9F4 !important;
    font-weight: 600;
  }
}

:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
  border-radius: 8px;
  color: #606266;
  font-size: 14px;

  &:hover {
    color: #3AB777;
    background-color: #F0F9F4 !important;
  }
}

:deep(.el-menu--inline) {
  padding-left: 0;

  .el-menu-item {
    height: 45px;
    line-height: 45px;
    padding-left: 48px !important;
    background-color: transparent;
    
    &:hover {
      color: #3AB777;
      background-color: #F0F9F4 !important;
    }
    
    &.is-active {
      color: #3AB777;
      background-color: #F0F9F4 !important;
      font-weight: 600;
    }
  }
}

/* 图标样式 */
.el-menu-item [class^="el-icon-"],
.el-sub-menu [class^="el-icon-"] {
  font-size: 18px;
  margin-right: 12px;
  color: #909399;
}

.el-menu-item.is-active [class^="el-icon-"],
.el-sub-menu.is-active [class^="el-icon-"] {
  color: #3AB777;
}
</style>